<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('训练包选择')"/>
    <th:block th:include="include :: select2-css"/>
    <style>
        .popover-show{
            cursor: pointer;
        }
        .active-self{
            border-bottom: solid 2px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="col-sm-12 search-collapse">
        <form id="data-form">
            <input id="childCourseId" name="childCourseId" th:value="*{childCourseId}" hidden="true">
            <input id="classTimes" name="classTimes"  hidden="true">
            <div class="select-list">
                <ul>
                    <li>
                        <label style="margin-right: 15px;width: 85px">训练主题选择: </label>
                        <select name="classPlanId" id="classPlanId"  style="margin-right: 25px" onchange="loadSubject()">
                            <option value="" selected>请选择</option>
                        </select>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" class="table-hover"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script th:inline="javascript">
    // 权限

    // 字典

    var prefix = ctx + "business/prepareClass";
    var i =0;
    $(function () {
        $.ajax({
            url: prefix + "/getCheckTrainTheme/"+$("#childCourseId").val(),
            type: "get",
            success: function (result) {
                // console.log(result);
                if (result.data.list.length >0){
                    var html ="";
                    var exists =[];
                    for(var i in result.data.list){
                        var obj = result.data.list[i];
                        var temp = obj.planName;
                        if(obj.trainCount>0){
                            temp+="（已训练"+obj.trainCount+"次）";
                        }
                        html+="<option value=\""+obj.id+"\" >"+temp+"</option>";
                    }
                    $("#classPlanId").append(html);
                }
            }
        })


        var options = {
            url: ctx + "business/classPlanDetail/listThemeProject",
            modalName: "数据",
            toolbar:false,
            singleSelect:true,
            onLoadSuccess : function(data) {
                var data = $('#bootstrap-table').bootstrapTable(
                    'getData', true);
                //合并单元格
                mergeCells($('#bootstrap-table'), data, "day", 1);
            },
            rowStyle: function(row, index) {
                var classes = ['active', 'success', 'info', 'warning', 'danger'];
                if (index % 2 === 1) {
                    return {classes: 'active-self'};
                }
                return {};
            },
            columns: [
                {
                    field: 'day',
                    title: '天',
                },
                {
                    field: 'classTimes',
                    title: '课时'
                },
                {
                    field: 'projectName2',
                    title: '引入2'
                },
                {
                    field: 'projectName3',
                    title: '引入3'
                },
                {
                    field: 'projectName4',
                    title: '项目1'
                },
                {
                    field: 'projectName5',
                    title: '项目2'
                },
                {
                    field: 'projectName6',
                    title: '项目3'
                },
                {
                    field: 'projectName7',
                    title: '项目4'
                }
            ]
        };
        $.table.init(options);
    });

    function mergeCells(target, data, fieldName, colspan) {
        //声明一个map计算相同属性值在data对象出现的次数和
        var sortMap = {};
        for (var i = 0; i < data.length; i++) {
            for ( var prop in data[i]) {
                if (prop == fieldName) {
                    var key = data[i][prop]
                    if (sortMap.hasOwnProperty(key)) {
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } else {
                        sortMap[key] = 1;
                    }
                    break;
                }
            }
        }
        for ( var prop in sortMap) {
            console.log(prop, sortMap[prop])
        }
        var index = 0;
        for ( var prop in sortMap) {
            var count = sortMap[prop] * 1;
            $(target).bootstrapTable('mergeCells', {
                index : index,
                field : fieldName,
                colspan : colspan,
                rowspan : count,
                classes:'danger'
            });
            index += count;
        }
    }

    $(document).on('hover', '.popover-show', function (e) {
        if (e.type == 'mouseenter') {
            $('.popover-show').popover('show');
        } else {
            $('.popover-show').popover('hide');
        }
    });

    function loadSubject() {
        i=0;
        $.table.refresh();
    }

    function submitHandler() {

        var reqData={
            "childCourseId":$("#childCourseId").val(),
            "classPlanId":$("#classPlanId").val()
        }
        $.ajax({
            url: prefix + "/saveTrainTheme",
            type: "post",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(reqData),
            success: function (result) {
                $.operate.successCallback(result);
            }
        })


    }
    function updateStatus(id,status) {
        var reqData={
            "id":id,
            "status":status
        }
        $.ajax({
            url: prefix + "/updateStatus",
            type: "post",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(reqData),
            success: function (result) {
                $.table.refresh();
            }
        })

    }
</script>
</body>

</html>